<template>
    <div class="video-res">
        <div class="result">
            <h3>搜索薛之谦,找到14个视频</h3>
        </div>
        <VideoList :videos="videos"/>
         <div class="pageinatin">
                <!-- @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :hide-on-single-page="true"
                :page-sizes="[30, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper,total,sizes"
                :total="videoCount">
            </el-pagination>
        </div>
    </div>

</template>
<script>
import VideoList from "../../../components/content/videolist/VideoList.vue";
export default {
    name: "",
    data() {
        return {
            keywords: "",
            currentPage: 1,
            pageSize: 30,
            videoCount: 0,
            videos: []
        };
    },
    created() {
        this.keywords = this.$route.params.keywords;
        this.getSearchVideoBy();
    },
    methods: {
        async getSearchVideoBy() {
            let offset = (this.currentPage - 1) * this.pageSize;
            let resAideo = await this.$API.searchdetail.getSearchVideoList(this.keywords, offset, this.pageSize);
            if (resAideo.code == 200) {
                this.videoCount = resAideo.result.videoCount;
                this.videos = resAideo.result.videos;
            }
        },
        handleSizeChange(size) {
            this.currentPage = 1;
            this.pageSize = size;
            this.getSearchVideoBy();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getSearchVideoBy();
        }
    },
    components: { VideoList }
}
</script>
<style lang="less" scoped>
    .result{
        h3{
            margin: 10px 10px;
        }
    }
    .pageinatin{
        width: 100%;
        text-align: center;
        
    }
</style>